<template>
    <div class="treeBox">
        <el-button type="primary" @click="save" style="margin-left: 50%;
    transform: translateX(-50px); margin-top: 10px; margin-bottom: 10px;">保存数据</el-button>
        <vue3-tree-org :data="state.data" center :define-menus="[]" :node-draggable="false" :label-style="state.style"
            :tool-bar="false">
            <template v-slot="{ node }">
                <div class="tree-org-node__text node-label">
                    <div style="margin-bottom: 5px;">{{ node.label }}</div>

                    <el-button type="text" v-if="node.$$data.isEdit === '1'" @click="setIsEdit(node.$$data)"
                        style="margin-bottom: 5px;padding-left: 0; padding-right: 0;">
                        {{
                            node.$$data.phone
                        }}</el-button>
                    <el-input v-else v-model.number="node.$$data.phone" placeholder="请输入手机号" :maxlength="11"
                        style="margin-bottom: 10px;" @blur="setPhone(node.$$data)" />
                    <el-upload class="avatar-uploader" :action="state.upDataUrl + '/unit/upload/upload'"
                        :show-file-list="false" :data="{ type: 'image' }" :headers="state.upLoadImgHeader"
                        :on-success="(e) => handleAvatarSuccess(node, e)">
                        <img v-if="node.$$data.image" :src="state.upDataUrl + node.$$data.image" class="avatar">
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
            </template>

        </vue3-tree-org>

    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import 'vue3-tree-org/lib/vue3-tree-org.css'
import Vue3TreeOrg2 from 'vue3-tree-org'
import { Plus } from '@element-plus/icons-vue'
import { getOrganization, organization } from '@/api/dashboard'
const Vue3TreeOrg = Vue3TreeOrg2.Vue3TreeOrg
import store from '@/store'
import { ElMessage } from 'element-plus'
const state = reactive({
    data: {
        id: 1,
        label: '安全责任人',
        image: '',
        phone: '',
        isEdit: '1',
        children: [
            {
                id: 2,
                pid: 1,
                label: '安全管理人',
                image: '',
                phone: '',
                test: true,
                isEdit: '1',
                children: [
                    { id: 6, pid: 2, label: '运营部', image: '', phone: '', isEdit: '1', },
                    { id: 8, pid: 2, label: '推广部', image: '', phone: '', isEdit: '1', },
                    { id: 10, pid: 2, label: '客户关系部', image: '', phone: '', isEdit: '1', },
                    { id: 12, pid: 2, label: '人事行致部', image: '', phone: '', isEdit: '1', },
                    { id: 14, pid: 2, label: '财务部', image: '', phone: '', isEdit: '1', },
                    { id: 16, pid: 2, label: '拓商部', image: '', phone: '', isEdit: '1', },
                    { id: 18, pid: 2, label: '信息组', image: '', phone: '', isEdit: '1', },
                    { id: 20, pid: 2, label: '安保部', image: '', phone: '', isEdit: '1', }
                ]
            }
        ]
    },

    expandAll: true,
    style: {
        background: '#fff',
        color: '#5e6d82'
    },
    upDataUrl: import.meta.env.VITE_APP_API_BASEURL,
    upLoadImgHeader: {
        'A-Token': store.state.user.a_token,
        'U-Token': store.state.user.u_token
    }
})
onMounted(() => {
    toggleExpand(state.data, state.expandAll)
})
const setPhone = (node) => {
    node.isEdit = '1'
}
const setIsEdit = (node) => {
    node.isEdit = '0'
}
const toggleExpand = (data, val) => {
    if (Array.isArray(data)) {
        data.forEach((item) => {
            item.expand = val
            if (item.children) {
                toggleExpand(item.children, val)
            }
        })
    } else {
        data.expand = val
        if (data.children) {
            toggleExpand(data.children, val)
        }
    }
}
const handleAvatarSuccess = (val, e) => {
    val.$$data.image = e.data.result
    Object.assign({}, state.data, val.$$data)
}
const save = async () => {
    console.log(state.data)
    await organization({ data: state.data })
    ElMessage.success('保存成功')
}
const getData = async () => {
    const { data } = await getOrganization()
    state.data = data.data
    console.log(data.data, state.data)
}
onMounted(() => {
    getData()
})
</script>

<style lang="scss" scoped>
.treeBox {
    width: 100%;
    height: 100%;

    :deep(.tree-org-node__content) {
        max-width: 170px;

        .img {
            margin-top: 10px;
            width: 100px;
            height: 100px;
        }
    }
}
</style>
<style scoped>
.avatar-uploader .avatar {
    width: 100%;
    height: 148px;
    display: block;
}
</style>

<style>
.avatar-uploader {
    width: 140px;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.avatar-uploader .el-upload .el-icon.avatar-uploader-icon {
    border: none;
}
</style>
